<template>
  <el-card class="box-card">
    <!-- 一个摁钮 -->
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="box">说明：目前支持学科和关键字条件筛选</div>
      </el-col>

      <el-col :span="3" :offset="13">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('/questions/new/?type=add')"
          >新增试题</el-button
        >
      </el-col>
    </el-row>
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              @change="SubjectListFn"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option
                v-for="item in QuestionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                v-for="item in directionList"
                :key="item.index"
                :label="item"
                :value="item.index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
              v-model="form.creatorID"
              placeholder="请选择"
              @focus="getCreatorID"
            >
              <el-option
                v-for="item in CreatorIDList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="城市">
            <el-row>
              <el-col :span="12">
                <el-select
                  v-model="form.province"
                  placeholder="请选择"
                  @change="getProvinceFn"
                >
                  <el-option
                    v-for="item in provincesList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-select v-model="form.city" placeholder="请选择">
                  <el-option
                    v-for="item in citysList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="关键字">
            <el-button size="mini" @click="clearForm">清除</el-button>
            <el-button type="primary" size="mini" @click="searchChoice"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待审核" name="0"></el-tab-pane>
      <el-tab-pane label="已审核" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <!-- 灰色提示 -->
    <el-alert
      :title="`数据一共有${counts}条`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        width="100"
      ></el-table-column>
      <el-table-column prop="subject" label="学科" width="100">
        <template #default="{ row }">
          {{ getSubject(row.subjectID) }}
        </template>
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="100">
        <!-- <template #default="{ row }">
          {{ getCatalog(row.catalogID) }}
        </template> -->
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="100"
        :formatter="getQuestionType"
      >
      </el-table-column>
      <el-table-column prop="question" label="题干" width="200">
        <template #default="{ row: { question } }">
          <p v-html="question"></p>
        </template>
      </el-table-column>

      <el-table-column prop="addDate" label="录入时间" width="150">
        <template #default="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="80"
        :formatter="getDifficulty"
      ></el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="100"
        :formatter="getChkStateNum"
      >
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="100"
      ></el-table-column>
      <!-- :formatter="getPublishType" -->
      <el-table-column prop="publishState" label="发布状态" width="100">
        <template #default="{ row }">
          {{ getPublishState(row) }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="tableHandleClick(scope.row.id)"
            type="text"
            size="small"
          >
            预览</el-button
          >
          <!-- 审核状态已审核禁用 -->
          <el-button
            :disabled="scope.row.chkState === 1 ? true : false"
            type="text"
            size="small"
            @click="getCheck(scope.row.id)"
            >审核</el-button
          >
          <!-- 上架修改禁用 -->
          <el-button
            :disabled="scope.row.publishState === 0 ? true : false"
            type="text"
            size="small"
            @click="getEditFn(scope.row.id)"
            >修改</el-button
          >

          <el-button
            v-if="scope.row.publishState === 1"
            type="text"
            size="small"
            @click="getUpDown(scope.row.id, scope.row.publishState)"
          >
            <template #default> 下架 </template>
          </el-button>
          <el-button
            v-else
            type="text"
            size="small"
            @click="getUpDown(scope.row.id, scope.row.publishState)"
          >
            <template #default> 上架 </template>
          </el-button>

          <el-button
            :disabled="scope.row.publishState === 1 ? true : false"
            type="text"
            size="small"
            @click="getDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div style="height: 60px; margin-top: 10px; text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 5]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>
    <!-- 审核对话框 -->
    <el-dialog
      title="题目审核"
      :visible.sync="showDialog"
      width="30%"
      @close="closeDialogVisible"
    >
      <el-form :model="checkForm" :rules="rules" ref="checkForm">
        <el-form-item prop="chkState">
          <!-- <el-radio v-model="checkForm.chkState" :label="0">待审核</el-radio> -->
          <el-radio v-model="checkForm.chkState" :label="1">通过</el-radio>
          <el-radio v-model="checkForm.chkState" :label="2">拒绝</el-radio>
        </el-form-item>

        <el-form-item prop="chkRemarks">
          <el-input
            type="textarea"
            v-model="checkForm.chkRemarks"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible">取 消</el-button>
        <el-button type="primary" @click="subCheck">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 题目预览 -->
    <questions-preview
      :questionsDialogVisibleShow.sync="questionsDialogVisibleShow"
      :questionsPreviewId="questionsPreviewId"
    ></questions-preview>
  </el-card>
</template>

<script>
import { choice, choiceCheck, choicePublish, removeRandoms } from '@/api/hmmm/questions.js' // 列表
import { subjectsSimpleApi } from '@/api/hmmm/subjects.js' // 学科
import { list } from '@/api/hmmm/directorys.js' // 二级目录
import { list as tagsList } from '@/api/hmmm/tags.js'
import { list as userlist } from '@/api/base/users.js' // 录入人接口
import { questionType, difficulty, direction, chkType } from '@/api/hmmm/constants.js' // 枚举
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 表单数据
      form: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: ''// 城市
      },
      subjectList: [], // 学科列表
      catalogList: [], // 二级目录
      tagsList: [], // 标签
      CreatorIDList: [], // 录入人
      // 标签页
      activeName: 'all',
      // 所有表格数据
      tableData: [],
      page: 1, // 页数
      pagesize: 5, // 页容量
      counts: 0, // 总条数
      subjectId: '', // 学科id
      QuestionTypeList: questionType, // 枚举 试题类型
      difficultyList: difficulty, // 枚举 难度
      directionList: direction, // 枚举 方向
      // provincesList: [] // 城市列表
      chkStateList: chkType, // 枚举 审核状态
      showDialog: false, // 审核对话框
      checkForm: { // 审核数据
        chkState: 1, // 题目审核
        chkRemarks: '', // 审核意见
        id: ''// 题目审核id
      },

      // 规则
      rules: {
        chkRemarks: [{ required: true, message: '请输入审核意见', trigger: 'blur' }]
      },
      // cataList: [] // table 目录列表
      questionsDialogVisibleShow: false, // 预览弹框显示
      questionsPreviewId: '' // 预览id
    }
  },
  computed: {
    // 省
    provincesList () {
      return provinces()
    },
    // 市
    citysList () {
      return citys(this.form.province)
    }
  },
  created () {
    // 获得列表
    this.choiceFn()
    // 科目列表
    this.getSubjectList()
  },
  methods: {
    // 表格查看预览
    async tableHandleClick (id) {
      // 打开弹窗
      this.questionsDialogVisibleShow = true
      this.questionsPreviewId = id
    },
    // 获取精选列表
    async choiceFn () {
      const { data } = await choice({ page: this.page, pagesize: this.pagesize })
      // console.log(data)
      this.counts = data.counts
      this.tableData = data.items
    },
    // 审核状态
    getChkStateNum (row, column, cellValue, index) {
      // console.log(this.employmentTextList)
      // 在枚举列表中寻找id 和 我们的是不是应对
      const chkStateText = this.chkStateList.find(item => item.value === cellValue)
      return chkStateText ? chkStateText.label : '未知'
    },
    // 难度
    getDifficulty (row, column, cellValue, index) {
      const difficultyText = difficulty.find(item => item.value == cellValue)
      return difficultyText ? difficultyText.label : '未知'
    },
    // 题型
    getQuestionType (row, column, cellValue, index) {
      const questionTypeText = questionType.find(item => item.value == cellValue)
      return questionTypeText ? questionTypeText.label : '未知'
    },
    // 发布状态
    // getPublishType (row, column, cellValue, index) {
    //   const publishTypeText = publishType.find(item => item.value == cellValue)
    //   return publishTypeText ? publishTypeText.label : '未知'
    // },
    // 获得学科
    async getSubjectList () {
      const { data } = await subjectsSimpleApi()
      this.subjectList = data
    },

    // 列表学科
    getSubject (id) {
      // console.log(id)
      const SubjectObj = this.subjectList.find(element => element.value === id)
      // console.log(SubjectObj)
      return SubjectObj ? SubjectObj.label : '未知'
    },
    // 学科的change事件
    async SubjectListFn () {
      // 获得二级目录
      const { data } = await list({ subjectID: this.form.subjectID })
      // console.log(data)
      this.catalogList = data.items
      // 清空目录数据
      this.form.catalogID = ''
      // 获得标签列表
      const { data: data2 } = await tagsList({ subjectID: this.form.subjectID })
      // console.log(data2)
      this.tagsList = data2.items
      // 清空标签数据
      this.form.tags = ''
    },
    // 录入人
    async getCreatorID () {
      const { data: { list } } = await userlist()
      // console.log(list)
      this.CreatorIDList = list
    },
    // 城市
    getProvinceFn () {
      console.log(this.form.city)
      this.form.city = ''
      // console.log(this.provincesList)
    },
    // 清空表单
    clearForm () {
      this.form = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: ''// 城市
      }
    },
    // 筛选
    async searchChoice () {
      const { data } = await choice({ page: this.page, pagesize: this.pagesize, ...this.form })
      // console.log(data)
      this.counts = data.counts
      this.page = +data.page
      this.pagesize = +data.pagesize
      this.tableData = data.items
    },
    // 切换页码
    handleCurrentChange (val) {
      this.page = val
      this.choiceFn()
    },
    // 页容量
    handleSizeChange (val) {
      // console.log(val)
      this.pagesize = val
      this.choiceFn()
    },
    // 标签切换
    async handleClick (tab) {
      // console.log(tab)
      if (tab.name == 'all') {
        // console.log(1)
        this.choiceFn()
      } else {
        const { data } = await choice({ page: 1, pagesize: 5, chkState: this.activeName })
        this.counts = data.counts
        this.tableData = data.items
      }
    },
    // 发布状态
    getPublishState (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    },
    // 审核打开弹框
    getCheck (id) {
      this.showDialog = true
      // console.log(id)
      this.checkForm.id = id
    },
    // 题目审核确定
    subCheck () {
      this.$refs.checkForm.validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          await choiceCheck(this.checkForm)
          // console.log(res)
          this.closeDialogVisible()
          this.$message.success('恭喜您 审核成功')
          this.choiceFn()
        } else {
          // console.log('error submit!!')
          return false
        }
      })

      // 刷新列表
      this.choiceFn()
    },
    // 关闭审核弹窗
    closeDialogVisible () {
      this.showDialog = false
      this.$refs.checkForm.resetFields()
      this.checkForm = { // 审核数据
        chkState: 1, // 题目审核
        chkRemarks: '', // 审核意见
        id: ''// 题目审核id
      }
    },
    // 修改跳转
    getEditFn (id) {
      this.$router.push(`/questions/new/?type=edit/${id}`)
    },
    // 上下架
    getUpDown (id, publishState) {
      const state = publishState == 1 ? '下架' : '上架'
      // console.log(id, publishState)
      // console.log(id)
      // if (publishState == 1) {
      this.$confirm(`您确定${state}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await choicePublish({ id: id, publishState: publishState ? 0 : 1 })
        console.log(res)
        this.choiceFn()
        this.$message({
          type: 'success',
          message: `${state}成功!`
        })
        // console.log(publishState)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${state}`
        })
      })
      // }
    },
    // 删除
    getDel (id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeRandoms({ id: id })
        console.log(res)
        this.choiceFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>

<style scoped lang='scss'>
.el-row {
  margin-bottom: 20px;
  margin-right: 0 !important;
  // ::v-deep .el-row {
  //   margin-right: 0;
  // }
  .box {
    color: hotpink;
    font-size: 16px;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
